<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${article.title}">文章详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/skins/default.css}">

</head>
<body>
<!--顶部导航栏-->
<div th:replace="Currency/indexnav::indexnav(2)"></div>

<div class="container" style="background-color: #fff" >
    <div class="row ">
        <div class="col-md-3">
            <span style="font-size: 20px">美文|</span> 记录-美好-生活 </div>
    </div>
</div>
<hr>
<!-- Blog body start -->
<div class="blog-body content-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-12">
                <!-- Blog 1 start -->
                <div class="blog-1 blog-big">
                    <div class="blog-photo">
                        <img th:src="${article.photo}" alt="blog-img" class="img-fluid">
                    </div>
                    <div class="detail" id="articleid" th:value="${article.id}">
                        <h3>
                            <a th:href="@{'/article/'+${article.id}}" th:text="${article.title}">Find Your Dream Real Estate</a>
                        </h3>
                        <p class="navbar-right">
                            <span>
                                发布时间：<em th:text="${#dates.format(article.createtime,'yyyy-MM-dd hh:MM:dd')}">2020-03-27 10:10:10</em>
                                &nbsp;&nbsp;
                                <p2>浏览量：</p2>
                                <em th:text="${article.visitcount}" id="viewId">1235</em>
                </span>
                        </p>
                        <br>

                        <p th:utext="${article.content}">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five</p>
                        <br>
                        <div class=" center-block">
                            <span class="glyphicon glyphicon-heart"></span>
                            <a href="">点赞</a>
                        </div>
                        <div class="row clearfix">
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="blog-tags">
                                    <span>Tags</span>
                                    <a href="#" th:text="${article.tag.tag}">Features</a>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="blog-social-list">
                                    <span>Share</span>
                                    <a href="#" class="facebook-bg">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                    <a href="#" class="twitter-bg">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                    <a href="#" class="google-bg">
                                        <i class="fa fa-google"></i>
                                    </a>
                                    <a href="#" class="linkedin-bg">
                                        <i class="fa fa-linkedin"></i>
                                    </a>
                                    <a href="#" class="pinterest-bg">
                                        <i class="fa fa-pinterest"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Heading 2 -->
                <h3 class="heading-2">Comments Section</h3>
                <!-- Comments start -->
                <hr class="col-lg-12 col-md-12 col-sm-12 col-ss-12">
                <h3>
                    <span th:text="${commentNum}"></span>个回复
                </h3>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-ss-12" style="margin-top: 0;">
                <!--一级评论-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-ss-12"th:each="commentList:${commentList}" id="comment_content">
                    <div class="media">
                        <div class="media-left">
                            <img class="media-object img-rounded picset" style="width: 80px" th:src="${commentList.admin.photo}">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">
                                <span th:text="${commentList.admin.adminname}"/>
                                <div style="font-size: 15px; margin-top:5px;" th:text="${commentList.content}" >
                                </div>
                                <!--点赞评论时间-->
                                <div class="question-menu">
                                    <span class="glyphicon glyphicon-thumbs-up icon" aria-hidden="true"></span>
                                    <!--回复按钮-->
                                    <span class="glyphicon glyphicon-comment icon" aria-hidden="true" th:data-id="${commentList.id}"
                                          th:data-check="1" onclick="secondcomment(this)" ></span>
                                    <span th:text="${#dates.format(commentList.createtime,'yyyy-MM-dd')}"></span>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-ss-12 collapse sub-comment"
                                     th:id="${'comment-'+commentList.id}">
                                    <!--二级评论插入到这里-->
                                    <!--二级评论输入框-->
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-ss-12" style="margin-top: 10px;">
                                        <input type="text" class="form-control" placeholder="评论一下....." th:id="${'input-'+commentList.id}" >
                                        <button type="button" class="btn btn-success" style="float: right;margin: 10px;"
                                                onclick="replypost(this)"th:data-id="${commentList.id}" >
                                            提交
                                        </button>
                                    </div>
                                </div>
                            </h4>
                        </div>
                    </div>
                </div>
                <!--回复框-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-ss-12" id="comment_section">
                    <div class="media" style="margin-bottom: 20px">
                        <div class="media-left">
                            <img class="media-object img-rounded picset"
                            >
                        </div>
                        <div class="media-body" style="padding-top:10px;">
                            <h4 class="media-heading">
                                <span />
                            </h4>
                        </div>
                    </div>
                    <input type="hidden"  >
                    <textarea class="form-control" rows="6" style="margin-top:10px; margin-bottom: 10px;"
                              id="content"></textarea>
                    <button type="button" class="btn btn-success" style="float: right;margin: 10px;"
                            id="comment_btn">提交
                    </button>
                </div>



            </div>
            <div class="col-lg-4 col-md-12">
                <div class="sidebar-right">
                    <!-- Recent properties start -->
                    <div class="widget recent-properties">
                        <h3 class="sidebar-title">Author</h3>
                        <div class="s-border"></div>
                        <div class="media mb-4">
                            <a class="pr-3 media-left" th:href="@{'/userInfo/'+${article.adminid}}">
                                <img  th:src="${article.admin.photo}" alt="small-properties">
                            </a>
                            <div class="media-body align-self-center">
                                <h5>
                                    <a href="properties-details.html" th:text="${article.admin.adminname}">Hadwinling </a>
                                </h5>
                            </div>
                        </div>
                    </div>


                    <!-- Posts By 更多作品 Start -->
                   <!-- <div class="posts-by-category widget">
                        <h5 class="sidebar-title">更多作品</h5>
                        <div class="s-border"></div>
                        <ul class="list-unstyled list-cat">
                            <li th:each="moreArtileList:${moreArtileList}" th:if="${moreArtileList !=-1}">
                                <a th:href="${'/article/'+${moreArtileList.id}}" >
                                    <em th:text="${moreArtileList.title}">Single Family</em>
                                </a>
                            </li>
                        </ul>
                    </div>-->


                    <!-- Posts By 更多作品 Start -->
                   <!-- <div class="posts-by-category widget">
                        <h3 class="sidebar-title">同类型作品</h3>
                        <div class="s-border"></div>
                        <ul class="list-unstyled list-cat" >
                            <li th:each="tagArticleList:${tagArticleList}" th:if="${tagArticleList !=-1}">
                                <a th:href="${'/article/'+${tagArticleList.id}}" >
                                    <em th:text="${tagArticleList.title}">Single Family</em>
                                </a>
                            </li>
                        </ul>
                    </div>-->



                </div>
            </div>
        </div>
    </div>
</div>
<!-- Blog body end -->
<!--State GoToTop-->
<div th:replace="Currency/indexnav::GoToTop"></div>
<!--End GoToTop-->



<!--评论Start-->
<script>
    $("#comment_btn").click(function () {
        // alert("去评论啦");
        var articleid = $("#articleid").attr("value");//被评论的文章id
        var type;//评论的父级，若是评论文章，则设置为0 ，否则设置为1
        var content = $("#content").val();
        if (content == '') {
            alert("回复内容不能为空")
        }else{
            /*检查是否已经登录了*/
            $.ajax({
                url:"[(@{/checkLogin})]",
                type:"get",
                success:function (message) {
                    if (message=="0") {
                        //告知用户去登录
                        //并将按钮设置为
                        $("#comment_btn").addClass("disabled");
                        alert("亲，请先登录");
                        return;
                    }else{
                        //用户已经登录了，可以进行评论文章
                        var datas = {
                            "articleid":articleid,
                            "type":0,
                            "content":content
                        }
                        $.ajax({
                            type:"post",
                            url:"[(@{/comment})]",
                            data:datas,
                            success:function (message) {
                                if (message ==1){
                                    //评论成功
                                    window.location.reload();
                                }else{
                                    alert("出现错误啦");
                                }
                            }
                        })
                    }
                }
            })
        }
    })
</script>
<!--评论End-->

<!--回复start-->
<script>
    function replypost(e) {
        // alert("去回复啦");
        var parentcommentid = e.getAttribute("data-id");
        var content = $("#input-" + parentcommentid).val();
        console.log("content",content);
        console.log("parentcommentid",parentcommentid);
        if (content ==''){
            alert("回复内容不能为空")
        }else{
            /*检查是否已经登录了*/
            $.ajax({
                url:"[(@{/checkLogin})]",
                type:"get",
                success:function (message) {
                    if (message=="0") {
                        //告知用户去登录
                        //并将按钮设置为
                        $("#comment_btn").addClass("disabled");
                        alert("亲，请先登录");
                        return;
                    }else{
                        //用户已经登录了，可以执行回复操作
                        var datas = {
                            "parentcommentid":parentcommentid,
                            "type":1,
                            "content":content
                        }
                        $.ajax({
                            type:"post",
                            url:"[(@{/comment})]",
                            data:datas,
                            success:function (message) {
                                if (message ==1){
                                    //评论成功
                                    console.log('评论成功');
                                    window.location.reload();
                                }else{
                                    alert("出现错误啦");
                                }
                            }
                        })
                    }
                }
            })
        }
    }
</script>
<!--回复end-->
<!--展示二级评论的内容start-->
<script th:src="@{/js/moment.js}"></script>
<script>
    function secondcomment(e) {
        var id = e.getAttribute("data-id");
        var check = e.getAttribute("data-check");
        var comment = $("#comment-" + id);
        //如果check为1则展开二级评论，否则收缩
        if (check == "1") {
            var subCommentContainer = $("#comment-" + id);
            $.ajax({
                url:"[(@{/secondComment})]",
                data:{"parentcommentid":id},
                type:"get",
                success:function (message) {
                    // console.log(message);

                    //如果子元素的长度为1，即第一次添加，则调用下面的方法
                    if (subCommentContainer.children().length == 1) {
                        build(message,id);
                    }
                }
            })
            comment.addClass("in");
            e.setAttribute("data-check", "0");
            e.classList.addClass("active");

        } else {
            comment.removeClass("in");
            e.setAttribute("data-check", "1")
            e.classList.remove("active");
        }
    }


    function build(result,id){
        // console.log("result:",result);
        var commentList = result.extend.commentList;
        var subCommentContainer = $("#comment-" + id);
        // 循环
        $.each(commentList,function (index,item) {
            var usernameElement = $("<span/>",{
                html:item.admin.adminname});
            var contentElement = $("<div/>",{
                "style": "font-size: 15px; margin-top:5px;",
                html: item.content
            })
            var timeElement = $("<span/>",{
                "style": "float: right",
                html: moment(item.createtime).format('YYYY-MM-DD')
            })
            var questionmenuElement = $("<div/>", {
                "class": "question-menu"
            }).append(timeElement);
            var imgElement = $("<img/>", {
                "class": "media-object img-rounded picset",
                "style":"width:80px",
                "src": item.admin.photo
            });
            var medialeftElement = $("<div/>", {
                "class": "media-left"
            }).append(imgElement);

            var mediaheadingElement = $("<h4/>", {
                "class": "media-heading",
            }).append(usernameElement)
                .append(contentElement)
                .append(questionmenuElement);
            var mediabodyElement = $("<div/>", {
                "class": "media-body",
            }).append(mediaheadingElement);

            var mediaElement = $("<div/>", {
                "class": "media"
            }).append(medialeftElement)
                .append(mediabodyElement);

            var commentElement = $("<div/>", {
                "class": "col-lg-12 col-md-12 col-sm-12 col-ss-12 comments",
            }).append(mediaElement);

            subCommentContainer.prepend(commentElement);
        })
    }
</script>
<!--展示二级评论的内容end-->


</body>
</html>